<template>
  <div>
    <header>
      <div class="top">
        <span @click="home()">&lt;</span>
        <h1>到店服务</h1>
        <div><img src="lzc/s1.png" /></div>
      </div>
      <p>及时服务 立买立享 变美就是这么简单</p>
    </header>
    <section class="header-two">
      <select name="" id="" v-for="(item, idx) in data" :key="idx">
        <option value="">综合排序</option>
        <option value="">销量排序</option>
        <option value="">评分最高</option>
      </select>
      <select name="" id="">
        <option value="">今日可约</option>
        <option value="">销量排序</option>
        <option value="">评分最高</option>
      </select>
      <select name="" id="">
        <option value="">评分最高</option>
        <option value="">销量排序</option>
        <option value="">评分最高</option>
      </select>
    </section>
    <main>
      <Fu />
    </main>
  </div>
</template>

<script>
import Fu from "../../components/lzc/fuwu";

export default {
  data() {
    return {
      data: [],
    };
  },
  components: {
    Fu,
  },
  methods: {
    home() {
      this.$router.push("/home");
    },
  },
};
</script>

<style scoped>
header {
  height: 3.08rem;
  background-color: rgb(201, 170, 125);
  position: sticky;
  top: -3.08rem;
}
header p {
  text-align: center;
  margin-top: 0.26rem;
  color: white;
  font-size: 0.24rem;
}
.top {
  display: flex;
  justify-content: center;
  position: relative;
}
.top span {
  position: absolute;
  left: 0.2rem;
  top: 0.2rem;
  margin-top: 1.08rem;
  font-size: 0.7rem;
  color: white;
}
.top h1 {
  margin-top: 1.08rem;
  font-size: 0.8rem;
  color: white;
}
.top div {
  position: absolute;
  right: 0.2rem;
  top: 0.4rem;
  margin-top: 1.08rem;
}
.top img {
  width: 0.48rem;
  height: 0.36rem;
}
.header-two {
  height: 0.82rem;
  background-color: gainsboro;
  line-height: 0.82rem;
  position: sticky;
  top: 0;
}
.header-two select {
  margin: 0 0.2rem;
  border: none;
  background-color: gainsboro;
  outline-style: none;
  font-size: 0.12rem;
}
main {
  height: 15rem;
}
</style>